<template>
  <view>
    <view class="bigHeaderbox" v-for="item in textUlist" :key="item.id" @click="goToSomePage(item)">
      <view>
        <image class="urlimge" :src='url'></image>
        <text style="line-height: 45px;font-size: 14px;">{{item.textTop}}</text>
      </view>
      <view class="icoMg">
         <text v-if="item.textTop === '绑定SN码'" style="color: #09f;margin-right: 20rpx;">已绑定{{memberStore.snInfoLength}}个</text>
        <image class="urlimge2" :src='url2'></image>
      </view>
    </view>
    <!-- 热线电话 -->
    <view class="dianhua" @click="iphoneNum">
      <image class="dianhuaImage" :src='url3'></image>
      <text style="font-size: 14px;line-height: 45px;">热线电话：<text class="blueText">10086</text></text>
    </view>
  </view>
</template>

<script>
  import {
    defineComponent,
    toRefs
  } from 'vue'
  import {
    useListStore
  } from '@/store/pinia/yeStore'
  import {useMemberInfoStore} from '@/store/pinia/memberInfo'
  export default defineComponent({
    setup() {
      const url = 'https://cdn3.axureshop.com/demo/2027306/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u889.svg'
      const url2 = 'https://cdn3.axureshop.com/demo/2027306/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u885.svg'
      const url3 = 'https://cdn3.axureshop.com/demo/2027306/images/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83/u894.png'
      const liebiao = useListStore()
      const memberStore = useMemberInfoStore()
      const textUlist = liebiao.ShowUserList
      // 跳转页面
      const goToSomePage = (item) => {
        // console.log(item)
        if(!uni.getStorageSync('userInfo')) return uni.$showMsg('请先登录');
        switch (item.id) {
          case 1:uni.navigateTo({
            url:'/subpkg/watchHistory/watchHistory'
          })
            break;
          case 2:uni.navigateTo({
            url:'/subpkg/purchaseRecord/purchaseRecord'
          })
            break;
          case 3:uni.navigateTo({
            url:'/subpkg/pointOrder/pointOrder'
          })
            break;
          case 4:uni.navigateTo({
            url:'/subpkg/pointOrder/pointOrder'
          })
            break;
          case 5:uni.navigateTo({
            url:'/subpkg/bindingSn/bindingSn'
          })
            break;
          default:
            break;
        }
      }
      // 热线电话
      const iphoneNum = () => {
        uni.makePhoneCall({
          phoneNumber: '10086',
          fail() {
            uni.showToast({
              title: '失败',
              duration: 1000,
              icon: 'none'
            });
          }
        });
      }
      return {
        ...toRefs(),
        url,
        url2,
        url3,
        textUlist,
        iphoneNum,
        goToSomePage,
        memberStore
      }
    },
  })
</script>

<style scoped lang='scss'>
  .bigHeaderbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    /* margin-top: 60px; */
    height: 45px;
    border: 1px solid rgba(204, 204, 204, 1);

    .urlimge {
      width: 27px;
      height: 25px;
      vertical-align: middle;
      margin: 0 20px;
    }

    .icoMg {
      display: flex;

      .urlimge2 {
        margin-right: 30px;
        width: 9px;
        height: 16px;
      }
    }
  }

  .dianhua {
    border: 1px solid rgba(204, 204, 204, 1);
    height: 45px;
    display: flex;
    align-items: center;

    .dianhuaImage {
      padding: 0 20px;
      width: 24px;
      height: 24px;
    }

    .blueText {
      color: blue;
      font-size: 14px;
    }
  }
</style>
